<template>
    <div id="LineGraphic" > </div>
</template>

<script>
export default {
    //定义组件的各个属性参数
    props:{ 
            graphicTitle:String,    //图表标题
            graphicWidth:Number,    //图表宽度
            graphicHeight:Number,   //图表高度
            graphicData:Array,         //图表数据
            graphicSeriesTitle:String,//图表数据类型标题
            graphicGrid:Number,         //图表的Y轴坐标宽度，数值较大时，容易Y轴显示不全，故支持参数传入
            graphicYAxisLableData:Array,//图表Y坐标轴的标签
            graphicXAxisLableData:Array,   //图表X坐标轴的标签
            graphicXAxisLbaleRotate:Number //X轴坐标标签的旋转度，主要为了X轴显示长标签
    },
    data(){
        return{
            // graphicTitle:'',
            // graphicWidth:1000,
            // graphicHeight:480,
            // graphicData:[],
            // graphicSeriesTitle:'',
            // graphicGrid:40,
            // graphicYAxisLableData:[],
            // graphicXAxisLableData:[],
            // graphicXAxisLbaleRotate:0
            myChart:{},
        }
    },
    mounted() {
        //初始化图表的一系列参数
        this.parametertInit();
        setTimeout(() => {
            this.DrawEcharts();
        }, 100);
        
    },
    methods:{
        parametertInit(){
            document.getElementById("LineGraphic").style.width = this.graphicWidth + "px";
            document.getElementById("LineGraphic").style.height = this.graphicHeight + "px";
        },
        DrawEcharts(){
            console.log('InLineGraphic');
            console.log(this.graphicData);
            this.myChart = this.$echarts.init(document.getElementById('LineGraphic'));
            this.myChart.setOption({
                title : {
                    text: this.graphicTitle,
                    // subtext: '',
                    // x:'center'
                },
                tooltip: {
                    trigger  : 'axis',
                    formatter: function (params) {
                       //鼠标hover时候的提示数据
                    },
                    axisPointer: {
                        animation: false,
                        type     : 'none',
                    },
                    extraCssText: 'width:220px; white-space:pre-wrap'
                },
                //解决Y轴显示不全的情况
                grid: {
                    left: this.graphicGrid
                },
                xAxis: {
                    type     : 'category',
                    splitLine: {
                        show: false
                    },
                    // data:this.graphicXAxisLableData,
                },
                yAxis: {
                    type       : 'value',
                    boundaryGap: [0, '100%'],
                    splitLine  : {
                        show: false
                    },
                    

                },
                series: [
                {
                    name     : this.graphicSeriesTitle,
                    type     : 'line',
                    itemStyle: {
                      normal : {
                        lineStyle:{
                          color: 'red'
                        }
                      }
                    },
                    showSymbol    : false,
                    hoverAnimation: false,
                    data          :this.graphicData
                }
                ]
             });
        }
    }
}
</script>